<template>
  <div class="main-content">
    <div class="changePassword">
      <el-form :model="form" label-width="120px">
        <div class="form-password">
          <div class="personalData-form-text">旧密码</div>
          <div class="personalData-form-inp">
            <el-input @blur="oldPassword" type="password" show-password maxlength="12" onkeyup="this.value=this.value.replace(/\s+/g,'');" v-model.trim="form.oldPassword" placeholder="请输入旧密码" />
            <div v-show="data.oldPasswordFlag" class="hint">
              <span>{{data.oldPasswordMsg}}</span>
            </div>
          </div>
        </div>
        <div class="form-password">
          <div class="personalData-form-text">新密码</div>
          <div class="personalData-form-inp">
            <el-input @blur="newPassword" type="password" show-password maxlength="12" onkeyup="this.value=this.value.replace(/\s+/g,'')" v-model.trim="form.newPassword" placeholder="请输入新密码" />
          </div>
          <div v-show="data.newPasswordFlag" class="hint">
            <span>{{data.newPasswordMsg}}</span>
          </div>
        </div>
        <div>
          <el-button @click="onSubmit">确定</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
//引入vue
import { reactive,onMounted,getCurrentInstance } from 'vue';
//引入router
import {useRouter} from 'vue-router';
//引入信息模块
import { ElMessage } from 'element-plus';
//proxy
const { proxy } = getCurrentInstance();
//router
const router = useRouter();
//表单提交数据
const form = reactive({
  oldPassword:'',
  newPassword:''
})
//data数据
const data = reactive({
  //提示信息
  oldPasswordFlag:false,
  oldPasswordMsg:'',
  newPasswordFlag:false,
  newPasswordMsg:'',
  //旧密码
  oldPassword:'',

  newPassword:'',
  mouseFlag:false,
  //正则
  isNewFlag:'',
  isOldFlag:'',
})
//挂载后
onMounted(()=>{
  //挂载后发送请求获取旧密码
  proxy.$post('/api/PersonalCenter/pwd',{})
      .then((date)=>{
        let password = date;
        data.oldPassword = password;
      })
})
//旧密码失去焦点
const oldPassword = ()=>{
  // console.log(form.oldPassword)
  data.isOldFlag = /^[0-9a-zA-Z_]{6,12}$/g.test(form.oldPassword)
  console.log(data.isOldFlag);
  if (form.oldPassword===''){
    data.oldPasswordFlag = true;
    data.oldPasswordMsg = '密码不能为空';
  }else if (data.isOldFlag === false){
    data.oldPasswordFlag = true;
    data.oldPasswordMsg = '密码格式为6-12的数字字母下划线';
  }else if (data.isOldFlag){
    data.oldPasswordFlag = false;
  }
}
//新密码失去焦点
const newPassword = ()=>{
  // console.log(form.newPassword);
  data.isNewFlag = /^[0-9a-zA-Z_]{6,12}$/g.test(form.newPassword)
  // console.log(data.isNewFlag);
  //判断是否为空
  if (form.newPassword===''){
    data.newPasswordFlag = true;
    data.newPasswordMsg = '密码不能为空';
    //判断字符串是否有六位
  }else if (data.isNewFlag === false){
    data.newPasswordFlag = true;
    data.newPasswordMsg = '密码格式为6-12的数字字母下划线';
  }else if (data.isNewFlag){
    data.newPasswordFlag = false;
  }
}
//确定
const onSubmit = () => {
  data.isOldFlag = /^[0-9a-zA-Z_]{6,12}$/g.test(form.oldPassword)
  data.isNewFlag = /^[0-9a-zA-Z_]{6,12}$/g.test(form.newPassword)
  // form.oldPassword=parseInt(form.oldPassword)
  if (form.oldPassword===''&&form.newPassword===''){
    data.oldPasswordFlag = true;
    data.oldPasswordMsg = '密码不能为空';
    data.newPasswordFlag = true;
    data.newPasswordMsg = '密码不能为空';
  }else if (form.oldPassword===''){
    data.oldPasswordFlag = true;
    data.oldPasswordMsg = '密码不能为空';
  }else if (form.newPassword===''){
    data.newPasswordFlag = true;
    data.newPasswordMsg = '密码不能为空';
  }else if (data.isOldFlag&&data.isNewFlag){
    if (data.oldPassword!=form.oldPassword){
      ElMessage.error({
        message:'旧密码不正确'
      })
    }else if (data.oldPassword==form.oldPassword){
      if (data.oldPassword==form.newPassword){
        ElMessage.error({
          message:'新密码和旧密码一致'
        })
      }else {
        let newPassword = form.newPassword;
        let code = 200;
        proxy.$post('/api/PersonalCenter/pwd',{newPassword,code})
            .then((date)=>{
              ElMessage({
                message:'修改密码成功',
                type:'success'
              })
              form.oldPassword = '';
              form.newPassword = '';
              localStorage.removeItem('token');
              router.push('/login')
            })
      }
    }
  } else if (data.isOldFlag===false||data.isNewFlag===false){
    ElMessage.error({
      message:'密码格式不正确'
    })
  }
}
</script>

<style lang="less" scoped>
.main-content {
  width: 1034px;
  height: 100%;
  .changePassword {
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 #eaeaea;
    padding: 35px 50px;
    min-height: 100%;
    .el-input {
      height: 50px;
    }
    div {
      position: relative;
      margin-bottom: 15px;
      .personalData-form-text {
        padding-bottom: 10px;
      }
      .hint {
        position: absolute;
        bottom: -20px;
        span {
          text-align: left;
          color: red;
          font-size: 12px;
        }
      }
      .el-button {
        width: 270px;
        height: 50px;
        //background: #fff;
        //border: 1px solid #ccc;
        //color: #000;
        margin: 30px 0;
      }
      /deep/ .el-input__suffix {
        .el-input__suffix-inner {
          .el-icon {
            font-size: 18px;
          }
        }
      }
      //.el-button-blue {
      //  border: 1px solid #ccc !important;
      //  color: #409EFF !important;
      //}
    }
  }
}
</style>